﻿
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0,viewport-fit=cover">
    <title>标题</title>
    <link rel="stylesheet" href="/${BasePath}/static/css/weui.css" media="all" />
    <link rel="stylesheet" href="/${BasePath}/static/css/font-awesome.min.css" media="all" />
    <link rel="stylesheet" href="/${BasePath}/static/css/layer.css" media="all" />
    <style type="text/css">
        body{background: #ddcba3;padding-bottom: 65px}
        * {
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }
        ul,li{list-style:none}
        .img{width: 100%; height:auto; display:block}
        .img1{max-width:100%}
        .fixed-bottom{position: fixed;bottom: 0;left: 0;right: 0}
        .flex{padding: 0 15px}
        .flex .placeholder{text-align: center;font-size:0.8rem;font-size: 14px;}
        .head{margin-top: 10px;padding: 10px 0;background: #ddc48b}
        .flex1 .weui-flex__item:not(:nth-child(3n)){
            border-right: 1px solid #3e2d26
        }
        .time{margin:20px auto;}
        .weui-input{border: 1px solid #ddd;padding: 10px; line-height: 1.3333;height: 100%;background: #fff}
        .search-btn{background: #f1d005;padding: 10px 20px;color: #443039}
        .person-list{margin: 20px auto;overflow: hidden;width: calc(100% - 16px);margin-left: 8px;}
        .result{overflow: hidden;margin: 10px auto}
        .detail{padding:5px;background:#fff}
        .person-list .item,.w50{float: left;width: 50%}
        .zan{line-height: 30px;color: #ec1043}
        .zan-btn{display:block;width: 100%;line-height:30px;text-align: center;background-color: #f1d005;color: #443039;}
        .music,.tousu{
        	background-color: rgba(59, 59, 59, 0.5);
    		background-size: 34px;
    		top: 20px;
    		height: 34px;
    		position: fixed;
    		right: 20px;
    		width: 34px;
    		z-index: 999;
    		text-align:center;
    		line-height:30px;
    		color:#fff;
    		border-radius:50%;
    		border:1px solid #fff;
    		display:block
    	}
    	.tousu{
    		top:65px;
    		font-size:12px
    	}
    	.link{
    		display:block;
    		padding:5px
    	}
    	.music-play{
    		webkit-animation: musicplay 2.5s linear 0s infinite;
    		animation: musicplay 2.5s linear infinite;
    	}
    	@keyframes musicplay{
    		0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}
    		100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}
    	}
    	.btns{
    		text-align:center;
    		padding:15px 0 30px
    	}
    	.btn{
    		display:inline-block;
    		padding:10px 15px;
    		color: #0b0900;
    		background:#f1d005;
    		margin:0 2rem;
    		font-size:0.8rem;
    		font-weight:bold;
    		border-radius: 4px;
    	}
    	.info{
    		position:relative
    	}
    	.info p{
    		position: absolute;
		    right: 0;
		    bottom: 0;
		    background: #000;
		    opacity: 0.7;
		    color: #fff;
		    padding: 5px 10px;
    	}
    	.yg img{
            width:100%;
        }
        .yg p{
            font-size: 0.75rem;
            overflow: hidden;
            text-overflow:ellipsis;
            white-space: nowrap;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }
        .yg_l , .yg_r{
            width: calc(50% - 5px);
        }
        .yg li{
            background: #fff;
            margin-bottom: 10px;
            box-shadow: 0 0 5px #999;
        }
        .yg_l{
            float: left;
        }
        .yg_r{
            float: right;
        }
		.u_xinx{
	        position: absolute;
	        bottom: 4px;
	    }
	    .u_xinx img{
	        margin-left: 5px;
	        background: rgba(0,0,0,.2);
	        box-shadow: 0 1px 3px rgba(0,0,0,.5);
	        width: 26px;
	        height: 26px;
	        border-radius: 50%;
	        display: inline-block;
	    }
	    .u_xinx span{
	        position: relative;
	        text-shadow: 0 1px 1px #333;
	        top: -8px;
	        color: #fff;
	        font-size: 0.6rem;
	    }
	    .page {
	      font-weight: 900;
	      height: 40px;
	      text-align: center;
	      color: #888;
	      margin: 20px auto 20px;
	    }
	
	    .pagelist {
	      font-size: 0;
	      height: 50px;
	      line-height: 50px;
	    }
	
	    .pagelist span {
	      font-size: 12px;
	    }
	
	    .pagelist .jump {
	      padding: 5px 8px;
	      cursor: pointer;
	      background:#fff;
	      border-right:1px solid #ddd;
	      color: #000;
    	  font-weight: normal;
	    }
	
	    .pagelist .bgprimary {
	      cursor: default;
	      color: #fff;
	      background: #f1d005;
	      border-color: #f1d005;
	    }
	
	    .jumpinp input {
	      width: 55px;
	      height: 26px;
	      font-size: 13px;
	      border: 1px solid #ccc;
	      -webkit-border-radius: 4px;
	      -moz-border-radius: 4px;
	      border-radius: 4px;
	      text-align: center;
	    }
	
	    .ellipsis {
	      padding: 0px 8px;
	    }
	
	    .jumppoint {
	      margin-left: 30px;
	    }
	
	    .pagelist .gobtn {
	      font-size: 12px;
	    }
	
	    .bgprimary {
	      cursor: default;
	      color: #fff;
	      background: #337ab7;
	      border-color: #337ab7;
	    }
	    .pagelist .jump.disabled{
	      pointer-events: none;
	      background: #ddd;
	    }
    </style>
    <script type="text/javascript" src="/${BasePath}/static/js/zepto.min.js"></script>
    <script type="text/javascript" src="/${BasePath}/static/js/vue.min.js"></script>
    <script type="text/javascript" src="/${BasePath}/static/layui/layui.all.js"></script>
    <script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
    <script type="text/javascript" src="/${BasePath}/static/js/axios.min.js"></script>
</head>
<body ontouchstart>
	<div id="modal" class="layui-m-layer layui-m-layer2" index="1">
		<div class="layui-m-layershade"></div>
		<div class="layui-m-layermain">
			<div class="layui-m-layersection">
				<div class="layui-m-layerchild  layui-m-anim-scale">
					<div class="layui-m-layercont"><i></i><i class="layui-m-layerload"></i><i></i>
						<p>加载中</p>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div id="app">
		<div class="music music-play" v-on:click="say($event)">
			<i class="fa fa-music"></i>
		</div>
		<a class="tousu" :href="'/${BasePath}/free/complaint?activityid=' + activityid">投诉</a>
		<audio id="audio" loop="loop" style="display:none;width:0;height:0;" autoplay :src="music"></audio>
	    <div class="swiper-container">
	        <img :src="img1" class="img">
	    </div>
	    <a :href="adpicurl"><div class="swiper-container">
	        <img :src="img2" class="img">
	    </div></a>
	    <div>
	    	<div class="btns">
	    		<a class="btn" :href="'/${BasePath}/free/toEnroll?activityid=' + activityid" v-if="flag === 'Y'">我要报名</a>
	    		<a class="btn" v-if="flag === 'N'">报名已结束</a>
	    		<a class="btn" :href="'/${BasePath}/free/toActivityIntr?activityid=' + activityid">活动介绍</a>
	    	</div>
	    </div>
	    <div class="flex flex1">
	        <div class="weui-flex">
	            <div class="weui-flex__item"><div class="placeholder">已报名<p>{{enroll}}</p></div></div>
	            <div class="weui-flex__item"><div class="placeholder">点赞次数<p>{{thumbs}}</p></div></div>
	            <div class="weui-flex__item"><div class="placeholder">访问量<p>{{visits}}</p></div></div>
	        </div>
	    </div>
	    <div class="head time flex">
	        <div class="placeholder" id="timeleft"></div>
	        <div class="placeholder">活动时间：{{start}}-{{end}}</div>
	    </div>
	    <div class="flex">
	        <div class="weui-flex">
	             <div class="weui-flex__item">
	                <input class="weui-input" id="text" placeholder="请输入编号或姓名">
	             </div>
	             <a href="javascript:void(0)" class="search-btn" @click="player">搜索</a>
	        </div>
	    </div>
	    <div class="person-list">
	    	<ul id="show" class="yg yg_l" v-if="list">
				<li v-for="(item,index) in list" v-if="index%2==0">
					<a :href="'/${BasePath}/free/toPlayerDesc?playerid=' + item.id + '&activityid=' + item.activityid" class="link">
					<div style="position: relative;">
			            <div class="info">
	                	<img class="img img1" :src="item.playerpic">
	                	<p>{{item.playerno}}号  {{item.name}}</p>
	                	</div>
	                	<div class="result">
		                    <div class="w50">
		                        <i class="zan">{{item.poll}}赞</i>
		                    </div>
		                    <div class="w50">
		                        <span class="zan-btn">点赞</span>
		                    </div>
		                </div>
			        </div>
			        </a>
				</li>
			</ul>
			<ul class="yg yg_r">
				<li v-for="(item,index) in list" v-if="index%2==1">
					<a :href="'/${BasePath}/free/toPlayerDesc?playerid=' + item.id + '&activityid=' + item.activityid" class="link">
					<div style="position: relative;">
			            <div class="info">
	                	<img class="img img1" :src="item.playerpic">
	                	<p>{{item.playerno}}号  {{item.name}}</p>
	                	</div>
	                	<div class="result">
		                    <div class="w50">
		                        <i class="zan">{{item.poll}}赞</i>
		                    </div>
		                    <div class="w50">
		                        <span class="zan-btn">点赞</span>
		                    </div>
		                </div>
			        </div>
			        </a>
				</li>
			</ul>
			<div style="clear: both;"></div>
	        <!-- <div class="item" v-for="pd in list">
	        	<a :href="'/${BasePath}/free/toPlayerDetail?playerid=' + pd.id + '&activityid=' + pd.activityid" class="link">
	            <div class="detail">
	                <div class="info">
	                	<img class="img img1" :src="pd.playerpic">
	                	<p>{{pd.id}}号  {{pd.name}}</p>
	                </div>
	                <div class="result">
	                    <div class="w50">
	                        <i class="zan">{{pd.poll}}赞</i>
	                    </div>
	                    <div class="w50">
	                        <span class="zan-btn">点赞</span>
	                    </div>
	                </div>
	            </div>
	            </a>
	        </div> -->
	    </div>
	    <div class="page"  v-show="show">
	        <div class="pagelist">
	          <span class="jump" :class="{disabled:pstart}" @click="jumpPage(pages)"><<</span>
	          <span v-show="current_page>5" class="jump" @click="jumpPage(1)">1</span>
	          <span class="ellipsis"  v-show="efont">...</span>
	          <span class="jump" v-for="num in indexs" :class="{bgprimary:current_page==num}" @click="jumpPage(num)">{{num}}</span>
	         
	          <span v-show="current_page<pages-4" class="jump" @click="jumpPage(pages)">{{pages}}</span>
	          <span :class="{disabled:pend}" class="jump" @click="jumpPage(pages)">>></span>
	        </div>
	    </div>
	    <div class="swiper-container">
	        <img :src="img3" class="img">
	    </div>
	
	    <div class="weui-tabbar fixed-bottom">
	        <a :href="'/${BasePath}/free/playerList?activityid=' +activityid" class="weui-tabbar__item weui-bar__item_on">
	            <span style="display: inline-block;position: relative;">
	                <i class="weui-tabbar__icon fa fa-home"></i>
	            </span>
	            <p class="weui-tabbar__label">首页</p>
	        </a>
	        <a :href="'/${BasePath}/free/toRankList?activityid=' +activityid" class="weui-tabbar__item">
	            <i class="weui-tabbar__icon fa fa-trophy"></i>
	            <p class="weui-tabbar__label">榜单</p>
	        </a>
	        <a :href="'/${BasePath}/free/toGift?activityid=' +activityid" class="weui-tabbar__item">
	            <i class="weui-tabbar__icon fa fa-gift"></i>
	            <p class="weui-tabbar__label">奖品</p>
	        </a>
	    </div>
	</div>
     
    <script type="text/javascript" src="/${BasePath}/static/js/common.js"></script>
    <script type="text/javascript">
    layui.use('layer', function () {
    	var layer = layui.layer; 
    })
    	var config = config();
    	function getinfo(){
    		$.ajax({
	    		url: '/${BasePath}/free/saveNowUserMsg',
	    		type: 'post',
	    		data:{
	    			activityid: actid,
	    			openid: openid
	    		},
	    		suceess:function(){
	    			console.log("成功");
	    		}
	    	})
    	}
    	var vm = new Vue({
    		el: '#app',
    		data:{
    			page: 1,
    			count: '',
    			img1: '',
    			img2: '',
    			adpicurl: '',
    			img3: '',
    			start: '',
    			end: '',
    			id: '',
    			thumbs: 0,
    			visits: 0,
    			enroll: 0,
    			overDays: '',
    			music: '',
    			list: [],
    			activityid: '',
    			config1: '',
    			current_page: 1, //当前页
    	        pages: 0, //总页数
    	        changePage:'',//跳转页
    	        nowIndex:0,
    	        flag: 'N'

    		},
    		created:function(){
    			this.getData();
    			this.player();
    		},
    		mounted:function(){
    			this.audioAutoPlay('audio');
    		},
    		computed:{
    	         show:function(){
    	             return this.pages && this.pages !=1
    	         },
    	         pstart: function() {
    	           return this.current_page == 1;
    	         },
    	         pend: function() {
    	           return this.current_page == this.pages;
    	         },
    	         efont: function() {
    	           if (this.pages <= 7) return false;
    	           return this.current_page > 5
    	         },
    	         ebehind: function() {
    	           if (this.pages <= 7) return false;
    	           var nowAy = this.indexs;
    	           return nowAy[nowAy.length - 1] != this.pages;
    	         },
    	         indexs: function() {

    	           var left = 1,
    	             right = this.pages,
    	             ar = [];
    	           if (this.pages >= 7) {
    	             if (this.current_page > 5 && this.current_page < this.pages - 4) {
    	               left = Number(this.current_page) - 3;
    	               right = Number(this.current_page) + 3;
    	             } else {
    	               if (this.current_page <= 5) {
    	                 left = 1;
    	                 right = 7;
    	               } else {
    	                 right = this.pages;

    	                 left = this.pages - 6;
    	               }
    	             }
    	           }
    	           while (left <= right) {
    	             ar.push(left);
    	             left++;
    	           }
    	           return ar;
    	         },
    	    },
    		methods:{
    			jumpPage: function(id) {
    				
    				layer.load(1, {
					  shade: [0.5,'#333'],
					  time: false
					});
    				var self = this;
    		        this.current_page = id;
    		        console.log(id);
    		        axios.get('/${BasePath}/free/getPlayInfo',{
    		    		params:{
    		    			activityid: actid,
    		    			pageNo: id,
    		    			title: $('#text').val()
    		    		}
    		    	})
    		    	.then(function(response){
    		    		self.pages = response.data.playlist.pageCount;
    		    		self.list = response.data.playlist.data;
    		    		setTimeout(function(){
    		    			timer1 = setInterval(function() {
        		    	        let osTop = document.documentElement.scrollTop || document.body.scrollTop;
        		    	        let ispeed = Math.floor(-osTop / 5);
        		    	        document.documentElement.scrollTop = document.body.scrollTop = osTop + ispeed;
        		    	        layer.closeAll();
        		    	        this.isTop = true;
        		    	        if (osTop === 0) {
        		    	          clearInterval(timer1);
        		    	        }
        		    	    }, 30);
    		    		},0)
    		    		
    		    	})
    		    	.catch(function(error){
    		    		console.log(error);
    		    	})
    		    },
    		    audioAutoPlay(id) {
    		        var audio = document.getElementById(id);
    		        audio.play();
    		        document.addEventListener("WeixinJSBridgeReady", function () {
    		            audio.play();
    		        }, false);
    		        document.addEventListener('YixinJSBridgeReady', function () {
    		            audio.play();
    		        }, false);
    		    },
    		    player:function(){
    		    	var self = this;
    		    	axios.get('/${BasePath}/free/getPlayInfo',{
    		    		params:{
    		    			activityid: actid,
    		    			pageNo: 1,
    		    			title: $('#text').val()
    		    		}
    		    	})
    		    	.then(function(response){
    		    		self.list = response.data.playlist.data;
    		    		self.pages = response.data.playlist.pageCount;
    		    	})
    		    	.catch(function(error){
    		    		console.log(error);
    		    	})
    		    },
    			getData:function(){
    				
    				var self = this;
    				axios.get('/${BasePath}/free/getWeinxinDate',{
    		    		params:{
    		    			activityid: actid,
    		    			pageNo: 1,
    		    			title: $('#text').val()
    		    		}
    		    	})
    		    	.then(function(response){
    		    		$("title").html(response.data.title);
    		    		self.img1 = response.data.headpic;
    		    		self.img2 = response.data.adpic;
    		    		self.adpicurl = response.data.adpicurl;
    		    		self.visits = response.data.visits;
    		    		self.img3 = response.data.activitypic;
    		    		self.music = response.data.backmusic;
    		    		self.enroll = response.data.enroll;
    		    		self.overDays = response.data.overDays;
    		    		self.id = response.data.playerno;
    		    		self.thumbs = response.data.thumbs;
    		    	    self.end = response.data.end_time;
    		    	    self.start = response.data.start_time;
    		    	    self.flag = response.data.flag;
    		    	    self.activityid = getUrlParam('activityid');
    		    	    TimeDown("timeleft",response.data.start_time,response.data.end_time);
    		    	    wx.config({
    		    		    appId: config.appId, // 必填，公众号的唯一标识
    		    		    timestamp: config.timestamp, // 必填，生成签名的时间戳
    		    		    nonceStr: config.nonceStr, // 必填，生成签名的随机串
    		    		    signature: config.signature,// 必填，签名
    		    		    jsApiList: [
					            'checkJsApi',
					            'onMenuShareTimeline',
					            'onMenuShareAppMessage'
					        ] // 必填，需要使用的JS接口列表
    		    		});
    		    		
    		    	    wx.ready(function(){
	    		    	    wx.onMenuShareTimeline({ 
	    		    	        title: response.data.title, // 分享标题
	    		    	        desc: '我在参加' + response.data.title + '快来帮我点赞吧', // 分享描述
	    		    	        link: window.location.href.split("#")[0], // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
	    		    	        imgUrl: response.data.headpic, // 分享图标
	    		    	        success: function () {
	    		    	          // 设置成功
	    		    	        }
	    		    	    })
	    		    	    
	    		    	    
	    		    	    wx.onMenuShareAppMessage({ 
	    		    	        title: response.data.title, // 分享标题
	    		    	        desc: '我在参加' + response.data.title + '快来帮我点赞吧', // 分享描述
	    		    	        link: window.location.href.split("#")[0], // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
	    		    	        imgUrl: response.data.headpic, // 分享图标
	    		    	        success: function () {
	    		    	          // 设置成功
	    		    	        }
	    		    	    })
    		    	    })
    		    	    wx.error(function (res) {  
	            			console.log("error: " + res.errMsg);  
	        		    });  
    		    	    setTimeout(function () {
    		    	    	$('#modal').hide();
    	         	    }, 1000)
    		    	    if(openid != ""){
    		        		getinfo();
    		        	}
    		    	})
    		    	.catch(function(error){
    		    		console.log(error);
    		    	})
    			},
    			say: function(event) {
    		           if(audio.paused){
    		        	   $(".music").addClass('music-play');
    		        	   audio.play();
    		           }
    		           else{
    		        	   $(".music").removeClass('music-play');
    		        	   audio.pause();
    		           }
    		           
    		    },
    		    prev:function(){
    		    	var self = this;
    				axios.get('/${BasePath}/free/getWeinxinDate',{
    		    		params:{
    		    			activityid: actid,
    		    			pageNo: self.page - 1
    		    		}
    		    	})
    		    	.then(function(response){
    		    		self.list = response.data.playlist.data;
    		    		self.page = self.page - 1;
    		    	})
    		    	.catch(function(error){
    		    		console.log(error);
    		    	})
    		    },
    		    next:function(){
    		    	var self = this;
    				axios.get('/${BasePath}/free/getWeinxinDate',{
    		    		params:{
    		    			activityid: actid,
    		    			pageNo: self.page + 1
    		    		}
    		    	})
    		    	.then(function(response){
    		    		self.list = response.data.playlist.data;
    		    		self.page = self.page + 1;
    		    	})
    		    	.catch(function(error){
    		    		console.log(error);
    		    	})
    		    }
    		}
    	})
    	
    	//倒计时
    	function TimeDown(id,start,end) {
    		var begin = new Date(start.replace(/-/g, "/"));
            var to = new Date(end.replace(/-/g, "/"));
            var now = new Date();
            var Time = begin.getTime() - now.getTime();
            var deltaTime = to.getTime() - now.getTime();
            
            //超时就停止倒计时
            if (deltaTime <= 0) {
            	document.getElementById(id).innerHTML = "活动已结束！";
               /*  window.clearInterval(timer); */
                return;
            }
            var d= Math.floor(deltaTime / (1000 * 60 * 60 * 24));
            var h = Math.floor(deltaTime / 1000 / 60 / 60 % 24);
            var m = Math.floor(deltaTime / 1000 / 60 % 60);
            var s = Math.floor(deltaTime / 1000 % 60);
            function tow(n) {
                return n >= 0 && n < 10 ? '0' + n : '' + n;
            }
            if(Time > 0){
            	document.getElementById(id).innerHTML = "敬请期待！";
            }
            else if(Time <= 0 && deltaTime > 0){
            	document.getElementById(id).innerHTML = "距离活动结束:" + tow(d) + "天" + tow(h) + "小时" + tow(m) + "分钟" + tow(s) + "秒";
         	    setTimeout(function () {
         	        TimeDown(id,start,end);
         	    }, 1000)
            }
           
    	   
    	}
    	
    </script>
</body>
</html>
